<template>
    <div id="create-edit-container">
        <el-drawer
            direction="rtl"
            :visible.sync="stateManager.DialogVisible"
            :title="modalTitle"
            custom-class="demo-drawer"
            ref="drawer"
            size="40%">
            <div class="dialog-drawer-content">
                <div class="content" style="flex: 1">
                    <div class="col">
                        <el-upload action="/api/cms/asset"
                                   ref="upload"
                                   multiple
                                   :data="parameter"
                                   :headers="uploadAction"
                                   :show-file-list="false"
                                   :on-error="uploadFailedCallback"
                                   :before-upload="handleBeforeUpload"
                                   :on-success="uploadSuccessCallback"
                        >
                            <el-button size="small" type="primary">点击上传
                                <i class="el-icon-upload el-icon--right"></i></el-button>
                        </el-upload>
                    </div>
                    <hr>
                    <div class="container" style="margin-top: 1.5rem">
                        <div class="row picker-container">
                            <template v-for="(item,index) in tableList.items">
                                <div
                                    class="col-xl-3 col-lg-3 col-md-6 col-sm-6" @click="checkedImg(item,multiple)">
                                    <div class="single-cat-item"
                                         :class="{shadow:interviewImg.Listids.indexOf(item.id)>=0}">
                                        <img :src="item.path" alt="">
                                        <div class="item-meta">
                                            <span> <h4>{{item.name}} </h4> </span>
                                            <p>上传于{{item.created_at}}</p>
                                            <span class="watch-list-btn" v-for="item in item.tags">{{item}}</span>
                                        </div>
                                    </div>
                                </div>
                            </template>
                        </div>
                    </div>
                </div>
                <div class="dialog-drawer-footer">
                    <div class="dialog-drawer-footer row">
                        <div class="col">
                            <el-pagination
                                background
                                layout="prev, pager, next,total"
                                :page-size="18"
                                :total="list.total"
                                @current-change="handleCurrentChange"
                                :current-page="currentPage">
                            </el-pagination>
                        </div>
                        <div class="col pull-right">
                            <el-button type="ghost" @click="closeDialog">取消</el-button>
                            <el-button type="primary" @click="saveModel" :loading="isLoading">{{isLoading?'提交中':'确定'}}
                            </el-button>
                        </div>

                    </div>
                </div>
            </div>
        </el-drawer>
    </div>
</template>

<script>
    import {getToken} from '@/utils/auth'

    export default {
        props: {
            stateManager: {
                type: Object,
            },
            multiple: '',
        },
        data: function () {
            return {
                list: this.$listDataSource({
                    url: '/api/cms/asset',
                }),
                imageRefreshList: true,
                isLoading: false,
                imgIndex: 0,
                activeName: 'image',
                isActive: '',
//          是否清空标签栏
                isClear: '',
                interviewImg: {
                    Listids: [],
                    listthumbs: [],
                },
                uploadAction: window.uploadHeaders,
                currentPage: 1,
                parameter: {
                    type: 'image',
                    tags: [],
                },
                query: {
                    page: 1,
                    type: 'image',
                    tags: [],
                },
            }
        },
        methods: {
            checkedImg(item, multiple) {
                if (multiple == true) {
                } else if (multiple == false) {
                    this.interviewImg.Listids.splice(0)
                    this.interviewImg.listthumbs.splice(0)
                }
                console.log('当前id' + this.interviewImg.Listids)
                var ids = this.interviewImg.Listids.indexOf(item.id)
                console.log('fff', ids)
                if (ids >= 0) {
                    //如果包含了该ID，则删除（单选按钮由选中变为非选中状态）
                    this.interviewImg.Listids.splice(ids, 1)
                    this.interviewImg.listthumbs.pop(item.path)
                } else {
                    //选中该按钮
                    this.interviewImg.Listids.push(item.id)
                    this.interviewImg.listthumbs.push(item.path)
                }
                ids = this.interviewImg.Listids.indexOf(item.id)
                console.log('ggg', ids)
                console.log('子的id' + this.interviewImg.Listids)
                console.log('子的路径' + this.interviewImg.listthumbs)
            },

            postTag(e) {
                let self = this
                console.log(e)
                self.parameter.tags = e
                this.query.tags = self.parameter.tags
                self.imageRefreshList = true
            },
            uploadSuccessCallback: function (response, file) {
                //上传成功回调
                console.log(file)
                this.$message({
                    message: '成功上传',
                    type: 'success',
                })
                this.imageRefreshList = true
            },
            uploadFailedCallback: function (error, file) {
                //上传失败回调
                console.log(error)
                console.log(file)
                this.$Notice.error({
                    title: '上传失败',
                    desc: error,
                })
            },
            handleBeforeUpload(file) {
                let isJPG
                switch (file.type) {
                    case  'image/jpeg':
                    case  'image/jpg':
                    case  'image/png':
                        isJPG = true
                        break;
                    default:
                        isJPG = false
                }
                const isLt2M = file.size / 1024 / 1024 < 2;

                if (!isJPG) {
                    this.$message.error('上传图片只能是 JPG/PNG 格式!');
                }
                if (!isLt2M) {
                    this.$message.error('上传图片大小不能超过 2MB!');
                }
                return isJPG && isLt2M;
            },
            // 翻页
            handleCurrentChange(val) {
                this.currentPage = val
                this.query.page = val
                this.imageRefreshList = true
            },
            closeDialog: function () {
                this.stateManager.DialogVisible = false
                this.interviewImg.Listids = []
                this.interviewImg.listthumbs = []
                this.isClear = true
            },
            saveModel: function () {
                this.$emit('submitPicture', this.interviewImg)
                this.closeDialog()
            },
        },
        computed: {
            modalTitle: function () {
                return '选择图片'
            },
            tableList() {
                let self = this
                if (this.imageRefreshList) {
                    this.list.fetch(self.query, function () {
                        self.imageRefreshList = false
                    })
                }
                return this.list
            },
        },
        watch: {
            'stateManager.editModelId': function (newValue) {
                let self = this
                this.model.fetch(newValue, {}, function () {
                    self.stateManager.buttonLoading = false
                    self.stateManager.editDialogVisible = true
                }, function () {
                    self.stateManager.buttonLoading = false
                })
            },
        },
    }
</script>
<style lang="scss" scoped>
    .el-dialog__body {
        padding-top: 10px;
        padding-left: 20px;
        padding-right: 20px;
    }

    .image {
        width: auto;
        height: auto;
        max-width: 100%;
        max-height: 100%;
        margin: 0 auto;
        display: block;
    }

    .card-img-top {
        height: 100px;
        margin-top: 20px;
    }

    .time {

        font-size: 13px;
        color: #999;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .bottom {
        margin-top: 13px;
        line-height: 12px;
    }

    .button {
        padding: 0;
        float: right;
    }

    .clearfix:before,
    .clearfix:after {
        display: table;
        content: "";
    }

    .clearfix:after {
        clear: both
    }

    .shadow {
        box-shadow: 0 0 2px 2px #1ab394 !important;
    }

    .checked {
        color: #1ab394;
    }

    .imginfo {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis
    }

</style>
